import { Component, OnInit, Input, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
import { WySliderStyle } from './wy-slider-types';

@Component({
  selector: 'app-wy-slider-track',
  template: `
    <div class="wy-slider-track" [class.buffer]="wyBuffer" [ngStyle]="style"></div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class WySliderTrackComponent implements OnInit {
  @Input() wyVertical = false;
  @Input() wyLength: number;
  @Input() wyBuffer = false;

  style: WySliderStyle = {};
  constructor() {}

  ngOnInit() {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['wyLength']) {
      if (this.wyVertical) {
        this.style = {
          height: this.wyLength + '%',
          left: null,
          width: null
        };
      } else {
        this.style = {
          width: this.wyLength + '%',
          bottom: null,
          height: null
        };
      }
    }
  }
}
